<template>
  <div class="floatWindow">

    <section>
      <div class="weChat-box" @mouseenter="hovers(1)" @mouseleave="leave">
        <i class="dtFont dtFont-xiaochengxu"></i>
        <p>小程序</p>
      </div>
      <div class="hoverW" v-show="smallProgram">
        <img src="../assets/images/notice/WeChat.png" alt="">
      </div>
    </section>

    <section>
      <div class="gzh-box" @mouseover="hovers(2)" @mouseleave="leave">
        <i class="dtFont dtFont-gongzhonghao"></i>
        <p>公众号</p>
      </div>
      <div class="hoverW" v-show="officialAccount">
        <img src="../assets/images/notice/WeChat.png">
      </div>
    </section>

    <section>
      <div class="customer-box">
        <i class="dtFont dtFont-zaixiankefu"></i>
        <p>在线客服</p>
      </div>
    </section>


    <section>
      <div class="goTop-box" :class="noCant?'noCant':''" @click="goTop">
        <i class="dtFont dtFont-huidingbu"></i>
        <p>回顶部</p>
      </div>
    </section>
  </div>
</template>
<script>

export default {
  name: "goTop",
  data () {
    return {
      smallProgram:false,
      officialAccount:false,
      noCant:true
    }
  },
  mounted () {
    window.addEventListener('scroll', this.getScroll);
  },
  methods: {
    hovers(e){
      if(e===1){
        this.smallProgram=true;
      }else {
        this.officialAccount=true
      }
    },
    leave(){
      this.smallProgram=false;
      this.officialAccount=false
    },
    getScroll(){
      this.noCant = document.documentElement.scrollTop < 400;
    },
    goTop(){
      if(!this.noCant)document.body.scrollTop = document.documentElement.scrollTop = 0
    }
  },
  destroyed(){
    window.removeEventListener('scroll', this.getScroll);
  }
}
</script>

<style scoped>
</style>
